<template>
    <div id="login" v-loading="loading" @keyup.enter="login">
        <el-dialog title="登录" :visible.sync="visible" width="450px" :before-close="bef">
            <el-form :model="loginForm" :rules="rules" ref="loginForm">
                <el-form-item prop="account">
                    <el-input v-model="loginForm.account" placeholder="输入登录账号">
                        <i class="icon iconfont icon-shouji" slot="prefix"></i>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="loginForm.password" type="password" placeholder="输入密码">
                    </el-input>
                </el-form-item>
                <el-form-item v-if="imgCode.loading" prop="img_code" label="图片验证码">
                    <div @click="getImgCode"><el-image class="imgCode" :src="imgCode.src">
                    </el-image></div>
                    <el-input v-model="loginForm.img_code" maxlength="6" placeholder="输入验证码">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" style="width: 100%" @click="login">登录</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    /* eslint-disable */
    function isNumAaZz(str) {
        var reg = new RegExp(/^[A-Za-z0-9]+$/);
        return reg.test(str)
    }
    export default {
        name: "login",
        data() {
            return {
                loading: false,
                visible: true,
                rememberMe: true,
                loginForm: {
                    account: process.env.VUE_APP_LoginFormPhone,
                    password: process.env.VUE_APP_LoginFormPassword,
                    imgKey: '',
                    imgCode: '',
                    rememberMe: 1
                },
                imgCode: {
                    key: '',
                    src: '',
                    loading: false,
                },
                rules: {
                    account: [
                        {
                            required: true,
                            trigger: 'blur', validator: function (rule, value, callback) {
                                if (!isNumAaZz(value)) {
                                    callback(new Error('只能输入数字和大小写英文字母'))
                                } else if (value.length < 3 || value.length > 11) {
                                    callback(new Error('长度3 ~ 10个字符'))
                                } else {
                                    callback()
                                }
                            }
                        },
                    ],
                    img_code: [
                        {required: true, min: 6, max: 6, message: '图片验证码6位字符', trigger: 'blur'}
                    ],
                    password: [
                        {
                            required: true, validator: function (rule, value, callback) {
                                if (!isNumAaZz(value)) {
                                    callback(new Error('只能输入数字和大小写英文字母'))
                                } else if (value.length < 6 || value.length > 19) {
                                    callback(new Error('长度6 ~ 18个字符'))
                                } else {
                                    callback()
                                }
                            }
                        },
                    ],
                }
            };
        },
        watch: {
            "loginForm.account": function (v, o) {
                this.getImgCode();
            },
        },
        mounted() {
            let _this = this;
            let token = _this.Cookie.get("blog_user_token");
            if (token) {
                _this.$router.push({path: "/"});
            }
        },
        methods: {
            bef() {
                this.visible=true
            },
            login() {
                let _this = this;
                if (!_this.imgCode.loading) {
                    this.imgCode.loading = true;
                    _this.getImgCode();
                    return
                }
                _this.$refs['loginForm'].validate((valid) => {
                    if (valid) {
                        _this.setLogin();
                    } else {
                        _this.loading = false;
                        return false;
                    }
                });
            },
            setLogin() {
                let _this = this;
                _this.loading = true;
                _this.$ajax.post(_this.$URL.login, _this.loginForm).then(function (re) {
                    var data = re;
                    console.log(data);
                    _this.$store.commit('setToken', data);
                    _this.$router.push({name: "manager"});
                }).catch(function (err) {
                    // _this.getImgCode();
                    _this.loading = false;
                    _this.getImgCode();
                    _this.$message.error(err.data);
                })
            },
            getImgCode() {
                let _this = this;
                _this.imgCode.src = _this.$URL.getImgCode + _this.loginForm.account + "&w=150&h=50&v=" + new Date().getTime();
            }
        }
    }
</script>

<style scoped>
    .imgCode {
        width: 128px;
        height: 48px;
        overflow: hidden;
        border: #8c939d 1px solid;
        border-radius: 5px;
    }
</style>
